<template>
	<view class="">
		<!-- Location -->
		<view class="search-view">
			<image src="../../../static/Fig.png" mode="widthFix"></image>
			<text class="search-text">阿里巴巴淘宝城2期西溪园区</text>
			<text>></text>
		</view>
		<!-- Search -->
		<view class="search-cont">
			<view class="search" @click="seaRch()">
				<image src="../../../static/Focus.png" mode="widthFix" class="search-img"></image> <!-- mode  是对图片的裁剪-->
				<input type="text" placeholder="麻辣烫" disabled="" />
			</view>
		</view>
		<!-- Swiper -->
		<view class="swiper-view">
			<swiper :autoplay="false" :interval="2000" :duration="1000" @change="bannerfun">
				<block v-for="(item,index) in lable" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<block v-for="(listdata,index) in item" :key="index">
								<view class="conteng-img">
									<image :src="listdata.img" mode="widthFix" class="uploading"></image>
									<text>{{listdata.title}}</text>
								</view>
							</block>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- 指示点 -->
			<view class="instruct-view">
				<block v-for="(listdata,index) in instructdata" :key="index">
					<view class="instruct" :class="{active:index == num }">
						{{listdata}}
					</view>
				</block>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//面板指示点
				num: 0,
				instructdata: ['', ''],
				//Swiper List
				lable: [
					[{
							'img': '../../../static/beer.png',
							'title': '美食'
						},
						{
							'img': '../../../static/beverage.png',
							'title': '超市便利'
						},
						{
							'img': '../../../static/cake.png',
							'title': '蔬菜水果'
						},
						{
							'img': '../../../static/cake_02.png',
							'title': '美团专送'
						},
						{
							'img': '../../../static/cheers.png',
							'title': '跑腿代购'
						},
						{
							'img': '../../../static/cheese.png',
							'title': '夜宵'
						},
						{
							'img': '../../../static/coffee.png',
							'title': '津贴联盟'
						},
						{
							'img': '../../../static/donuts.png',
							'title': '甜点饮品'
						},
						{
							'img': '../../../static/ham.png',
							'title': '龙虾烧烤'
						},
						{
							'img': '../../../static/ice.png',
							'title': '甜蜜雪糕'
						}
					],
					[{
							'img': '../../../static/meat.png',
							'title': '汉堡披萨'
						},
						{
							'img': '../../../static/piza.png',
							'title': '日韩料理'
						},
						{
							'img': '../../../static/rice.png',
							'title': '麻辣烫'
						},
						{
							'img': '../../../static/tableware.png',
							'title': '快食简餐'
						},
						{
							'img': '../../../static/watermelon.png',
							'title': '浪漫鲜花'
						},
						{
							'img': '../../../static/milk.png',
							'title': '无辣不欢'
						},
						{
							'img': '../../../static/fish.png',
							'title': '饺子馆'
						},
						{
							'img': '../../../static/chicken.png',
							'title': '小吃馆'
						},
						{
							'img': '../../../static/meat_02.png',
							'title': '煲仔饭'
						},
						{
							'img': '../../../static/rice.png',
							'title': '其他'
						}
					]
				]
			}
		},

		methods: {
			// 滑块事件
			bannerfun(e) {
				console.log(e.detail.current)
				this.num = e.detail.current
			},
			seaRch(){
				wx.navigateTo({
					url: '../search/search',
					success: function(res){
						// success
					},
					fail: function() {
						// fail
					},
					complete: function() {
						// complete
					}
				})
			}
		}
	}
</script>
<!-- scoped 指的是当前页页面 -->
<style scoped>
/* Location */
.search-view image {
	width: 35upx;
	height: 35upx;
}

.search-view {
	font-size: 30upx;
	;
	font-weight: bold;
	display: flex;
	align-items: center;
	height: 80upx;
}

.search-text {
	padding: 0 10upx;
}

/* Search */
.search-img {
	margin: auto 0 auto 20upx;
	width: 40upx;
	height: 40upx;
}

.search {
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	display: flex;
	flex-direction: flex;
	background: #eff3f4;
	border-radius: 10rpx;
}

.search input {
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	font-size: 25upx;
	color: #666666;
}

.search-cont {
	display: flex;
	justify-content: space-around;
	height: 70upx;
	align-items: center;
}

/* swiper */
.swiper {
	height: 320upx !important;
}

.swiper-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	height: 320upx;
}

.conteng-img {
	width: calc((100% / 5) - 12px) !important;
	margin: 6px;
	position: relative;
	text-align: center;
}

.conteng-img text {
	padding-top: 20upx;
	font-size: 25upx;
}

.uploading {
	width: 70upx;
	height: 70upx;
	border-radius: 50upx;
	display: block;
	margin: 0 auto;
}

/* 指示点 */
.instruct-view {
	display: flex;
	justify-content: center;
	padding-top: 10upx;
}

.instruct {
	background: #e6e6e6;
	height: 10upx;
	width: 30upx;
	border-radius: 50upx;
	margin: 0 10upx;
}

.active {
	background-color: #fbae22 !important;
}
</style>
